<template>
    <d2-container class="warning-header">




        <el-card style="width:50%">
            <el-form   ref="currentUser" :model="currentUser"  :rules="rules3">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="用户名称">
                            <el-input v-model="currentUser.Username" disabled=""></el-input>
                        </el-form-item>

                        <el-form-item label="用户昵称">
                            <el-input v-model="currentUser.uname"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="currentUser.Password" type="password" ></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input  v-model="currentUser.CheckPassword" type="password"></el-input>
                        </el-form-item>
                        <el-form-item   label="联系方式">
                            <el-input v-model="currentUser.Telephone" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="父级节点">
                            <el-select v-model="currentUser.parentName" placeholder="请选择">
                                <el-option
                                        v-for="item in this.parentNames"
                                        :key="item.Id"
                                        :label="item.Text"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="所属公司">
                            <el-select v-model="currentUser.CompanyName" placeholder="请选择">
                                <el-option
                                        v-for="item in this.companys"
                                        :key="item.Id"
                                        :label="item.CompanyName"
                                        :value="item.CompanyCode">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="角色管理">
                            <el-select v-model="currentUser.RoleId" placeholder="请选择">
                                <el-option
                                        v-for="item in this.roles"
                                        :key="item.roleid"
                                        :label="item.rolename"
                                        :value="item.roleid">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="电话"
                        prop="Telephone"
                        :rules="[
                        {required:true,message:'请输入电话,内容不能为空!',trigger:'blur'}
                        ]">
                            <el-input  v-model="currentUser.Telephone"></el-input>
                        </el-form-item>

                        <el-form-item label="邮箱">
                            <el-input  v-model="currentUser.Email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>






                <el-form-item>
                    <el-row>
                        <el-col :span="8"><el-button type="primary" @click="submit('currentUser')" >保存</el-button></el-col>
                        <el-col :span="8"><el-button @click="handleClickUser()">新增子用户</el-button></el-col>
                        <el-col :span="8"><el-button @click="handleDelete()">删除</el-button></el-col>
                    </el-row>
                </el-form-item>

            </el-form>
        </el-card>

        <el-dialog
                title="增加子用户"
                :visible.sync="addFormVisible"
                width="30%"
                :before-close="handleClose">
               <el-card>
                   <el-form :label-position="labelPosition" ref="currentChildUser" :model="currentChildUser" status-icon :rules="rules2">
                      <el-form-item label="用户名   　"
                                    prop="Username"
                                    :rules="[
                                     {required:true,message:'请输入用户名,内容不能为空!',trigger:'blur' }
                            ]">
                         <el-input style="width:50%" v-model="currentChildUser.Username" autocomplete="off"></el-input>
                      </el-form-item>
                       <el-form-item label="昵称   　   　"
                                     prop="uname"
                                     :rules="[
                                     {required:true,message:'请输入昵称,内容不能为空!',trigger:'blur'}
                            ]">
                          <el-input  style="width:50%" v-model="currentChildUser.uname" autocomplete="off"></el-input>
                       </el-form-item>
                       <el-form-item label="密码   　   　"
                                     prop="Password">
                           <el-input  style="width:50%" type="password" v-model="currentChildUser.Password" autocomplete="off"></el-input>
                       </el-form-item>
                       <el-form-item label="确认密码"
                                     prop="CheckPassword">
                           <el-input  style="width:50%" type="password" v-model="currentChildUser.CheckPassword" autocomplete="off"></el-input>
                       </el-form-item>
                       <el-form-item label="父节点   　">
                           <el-input v-model="currentChildUser.parentName" readonly="true" style="width:50%"></el-input>
                       </el-form-item>
                       <el-form-item label="公司   　　">
                           <el-select  style="width:50%" v-model="currentChildUser.Company" placeholder="请选择公司">
                               <el-option   v-for="item in this.companys"
                                            :key="item.Id"
                                            :label="item.CompanyName"
                                            :value="item.CompanyCode">
                               </el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item label="角色   　　">
                           <el-select  style="width:50%"  v-model="currentChildUser.RoleId" placeholder="请选择角色">
                               <el-option   v-for="item in this.roles"
                                            :key="item.roleid"
                                            :label="item.rolename"
                                            :value="item.roleid">
                               </el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item label="电话   　　"
                                     prop="Telephone"
                                     :rules="[
                                     {required:true,message:'请输入电话,内容不能为空!',trigger:'blur'}
                            ]">
                           <el-input  style="width:50%" v-model="currentChildUser.Telephone" auto-complete="off"></el-input>
                       </el-form-item>
                       <el-form-item label="邮箱   　　" prop="Email">
                           <el-input  style="width:50%" v-model="currentChildUser.Email"></el-input>
                       </el-form-item>
                   </el-form>
               </el-card>
            <br/>

            <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="cancleChild('currentChildUser')">取消</el-button>
                    <el-button type="primary" @click="submitChild('currentChildUser')"
                               style="text-align: center">确定</el-button>
            </span>
        </el-dialog>

    </d2-container>
</template>
<script>

    import {
        getDetailUserInfo,
        getParentName,
        getRoleList,
        updateUser,
        deleteUser,
        getCompanyList,
        AddChildUser,
        BindUser,
    } from "../../api/sys/getUserInfo/index";
    import {getCompanyTable} from "../../api/data/getCompany";
    import {mapState} from 'vuex'

    export default {
        mounted() {
            let _this = this;
            this.handCompanys()
        },
        watch: {
            userNode: function (newnode, oldnode) {
                console.log('userNode', newnode)
                this.project = newnode
                console.log('user', this.handleUserInfo(this.project))
                this.handleUserInfo(this.project)


            }
        },
        computed: {
            ...mapState('d2admin/projectSelect', [
                'userNode'
            ])
        },
        data() {
            var validatePwd = (rule,value,callback)=>{
                if (value ===''){
                    callback(new Error('请输入密码'));
                }else {
                    if (this.currentChildUser.CheckPassword !== ''){
                        this.$refs.currentChildUser.validateField('CheckPassword');
                    }
                    callback();
                }
            };
            var validatePwd2 = (rule,value,callback)=>{
                if (value ===''){
                    callback(new Error('请再次输入密码'));
                }else  if (value !== this.currentChildUser.Password) {
                    callback(new Error('两次输入密码不一致！'));
                } else {
                    callback();
                }
            };
            return {
                project: null,
                parentNames:[],
                roles:[],
                companys:[],
                currentUser:{
                    "Id": "",
                    "Username":"",
                    "Password":"",
                    "CheckPassword":"",
                    "parentId": null,
                    "parentName": "",
                    "Company": "",
                    "CompanyName": "",
                    "CompanyLogo": "",
                    "Telephone": "",
                    "Email": null,
                    "regtime": "",
                    "LoginStatus": null,
                    "LoginCounts": null,
                    "IsManage": null,
                    "Role": null,
                    "UpClient": null,
                    "ServerStartDate": null,
                    "ServerDateLong": null,
                    "LastLoginDate": "",
                    "MacIp": null,
                    "LastLoginIP": null,
                    "PlantNo": null,
                    "uname": "",
                    "roofId": null,
                    "RoleId": null
                },
                currentChildUser:{
                    "Id": "",
                    "Username": "",
                    "Password": "",
                    "CheckPassword":"",
                    "parentId": null,
                    "parentName": "",
                    "Company": "",
                    "Telephone": "",
                    "Email": null,
                    "IsManage": null,
                    "Role": null,
                    "LastLoginDate": "",
                    "MacIp": null,
                    "LastLoginIP": null,
                    "PlantNo": null,
                    "uname": "",

                    "RoleId": null
                },
                addFormVisible: false,
                labelPosition:'left',
                rules2:{
                    Password:[
                        {validator:validatePwd,trigger:'blur'}
                    ],
                    CheckPassword:[
                        {validator:validatePwd2,trigger:'blur'}
                    ],
                },
                rules3:{
                    Password:[

                    ]
                }
            }
        },
        methods: {
            handCompanys(){
                getCompanyTable(1,100,{}).then(res => {
                    this.companys = res.data;
                })
            },
            handleUserInfo(project) {
                getDetailUserInfo(project.Id).then(res => {
                     res.data[0].CheckPassword ="",
                     this.currentUser = res.data[0]
                })
                getParentName(project.Id).then(res=>{
                    this.parentNames = res.data
                })
                getRoleList().then(res=>{
                    this.roles = res.data
                })
                getCompanyList().then(res=>{
                    console.log(res.data)
                    this.companys = res.data
                })
            },
            submit(currentUser){
                this.$refs[currentUser].validate((valid) => {
                    console.log(this.currentUser.CheckPassword);
                    if (valid) {
                        if (this.currentUser.Password===this.currentUser.CheckPassword){
                        updateUser(this.currentUser).then(res=>{
                            if(res.state === 0){
                                this.$message({
                                    message: '提交成功！',
                                    type: 'success'
                                });
                                this.$parent.$refs.treeSide.refresh();
                            } else {
                                this.$message({
                                    message: '提交失败！',
                                    type: 'error'
                                });

                            }
                        })
                        }else {
                            this.$message({
                                message:'密码不一致！',
                                type:'error'
                            });
                            return false;
                        }
                    } else {
                        this.$message({
                            message: '提交失败！',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            handleDelete:function(){
                this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{

                    deleteUser(this.currentUser.Id).then(res=>{
                        if(res.state === 0){
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                            this.$parent.$refs.treeSide.refresh();
                        } else {
                            this.$message({
                                message: '删除失败！',
                                type: 'error'
                            });

                        }
                    });

                    //这里怎么获取那个树
                    this.$parent.$refs.treeSide.refresh();

                }).catch((e)=>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            handleClickUser:function () {
              this.currentChildUser.parentId = this.currentUser.Id;
              this.currentChildUser.parentName = this.currentUser.Username;
              this.addFormVisible = true;
            },
            cancleChild:function (formName) {
                this.addFormVisible = false;
                this.$refs[formName].resetFields();
            },
            submitChild:function (currentChildUser) {
                 this.$refs[currentChildUser].validate((valid)=>{
                     if (valid){
                         AddChildUser(this.currentChildUser).then(res=>{
                             console.log(res.data)
                             let param = {
                                 userId:res.data,
                                 Id:this.currentChildUser.RoleId
                             }
                             BindUser(param).then(res=>{
                                 this.$message({
                                     message: '添加成功！',
                                     type: 'success'
                                 });
                                 this.cancleChild(currentChildUser)
                                 this.$parent.$refs.treeSide.refresh();
                             })
                         });
                     }else {
                         console.log('error')
                     }
                 })
            }
        }
    }
</script>
<style>
    .warning-header .d2-container-full__header {
        background: gainsboro !important;
    }

    .warning-header .d2-container-full__header {
        background: #1E9FFF !important;

    }

    .el-form-item__content {
        text-align: center;
    }

    .el-button {
        padding: 10px 30px;
        margin-right: 20px;
    }

    .el-form-item__label {
        margin-left: 5px;
    }

    .number1 {
        padding-left: 0px;
    }


</style>

